<template>
  <div>
    <alert v-model="show" title="提示" @on-show="onShow" @on-hide="onHide">{{message}}</alert>
    <Yq-header :needBack="needBack" :needLeft="needLeft" :needRight="needRight" :rightCallback="rightCallback" slot="header" v-if="isShowHeader" ref="header">
      <p slot="content" style="margin-left: -12px">{{title}}</p>
      <p slot="rightContent" v-if="needRight">{{rightContent}}</p>
      <p slot="leftContent" v-if="needLeft">{{leftContent}}</p>
    </Yq-header>
    <group gutter="0" style="padding-top: 38px;">
      <flexbox :gutter="0">
        <flexbox-item :span="5"><div class="flex-demo">
          <p style="font-size: 14px;color: #636363;">我的积分: &nbsp;<span>{{myPiont}}</span></p>
        </div></flexbox-item>
      </flexbox>
      <x-input v-model="cashInvitation" type="number" placeholder="请输入申请积分数" @on-change="getCashMoney"></x-input>
      <cell gutter="0" style="padding: 5px 0"></cell>
      <flexbox :gutter="0">
        <flexbox-item><div class="flex-cash" style="font-size: 12px;color: #636363;">
          <p>到账金额:¥<span>{{cashMoney}}</span></p>
          <p>*申请积分数量必须大于{{maxCash}}</p>
        </div></flexbox-item>
      </flexbox>
    </group>
    <x-button type="primary" @click.native="integralPromptFn" action-type="button" style="width: 200px;margin-top: 40px;background: #3d82e5;font-size: 15px;">提交申请</x-button>
  </div>
</template>

<script>
  import { Group, Cell, XButton, XInput, Flexbox, FlexboxItem, Alert, AlertPlugin, Confirm, ConfirmPlugin } from 'vux'
  import * as urls from '../../../../api/urls'
  import YqHeader from '../../../../components/YqHeader.vue'

  export default {
    components: {
      Group,
      Cell,
      XButton,
      XInput,
      Flexbox,
      FlexboxItem,
      Alert,
      AlertPlugin,
      Confirm,
      ConfirmPlugin,
      YqHeader
    },
    data () {
      return {
        isShowHeader: true,
        title: '申请额外兑换',
        rightContent: '申请记录',
        needBack: true,
        needRight: true,
        needLeft: false,
        leftContent: '',
        show: false,
        message: '',
        myPiont: 888,
        cashPiont: 800,
        cashInvitation: '',
        cashMoney: 0,
        maxCash: 100
      }
    },
    methods: {
      rightCallback () {
        this.$router.push({
          path: '/pionts/ApplicationRecord'
        })
        this.$router.go(1)
      },
      onHide () {
        if (this.message === '您的申请已成功提交，请耐心等待工作人员审核。您可以在“申请记录”中查看审核进度') {
          this.$router.go(-2) // 回到我的积分页面
        }
      },
      onShow () {
      },
      getCashMoney () {
        this.cashMoney = parseInt(this.cashInvitation / 20)
      },
      getPointInfo () {
        let userId = window.sessionStorage.getItem('userId')
        let that = this
        that.http(urls.pointExchange, {userId: userId}, function (res) {
          if (res.status === 100) {
            that.maxCash = res.data.pointPara.point2balanceExtraMin
            that.myPiont = res.data.userPoint
            that.cashPiont = res.data.canPointAmount
          } else {
            that.show = true
            that.message = res.errMsg
          }
        }, function (res) {
          that.show = true
          that.message = res.errMsg
        })
      },
      integralPromptFn () {
        if (this.cashInvitation !== '' && this.cashInvitation !== null && this.cashInvitation !== undefined) {
          let userId = window.sessionStorage.getItem('userId')
          let that = this
          that.http(urls.extraExchangeApply, {userId: userId, exchangePoint: that.cashInvitation}, function (res) {
            if (res.status === 100) {
              // 提交申请
              that.show = true
              that.message = '您的申请已成功提交，请耐心等待工作人员审核。您可以在“申请记录”中查看审核进度'
            } else {
              that.show = true
              that.message = res.errMsg
            }
          }, function (res) {
            that.show = true
            that.message = res.errMsg
          })
        } else {
          this.show = true
          this.message = '请输入申请积分数'
        }
      },
      weixinfn15 () {
        let that = this
        let userId = window.sessionStorage.getItem('userId')
        let logo = window.sessionStorage.getItem('LOGO')
        let url = window.location.origin
        let link = url + '/api/wxAuth/index?type=t1' + '&uid=' + userId
        that.$wechat.onMenuShareAppMessage({
          title: '孝行通', // 分享标题
          desc: '孝行通·微商城 一个让子女为父母尽孝的老年服务平台', // 分享描述
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
        that.$wechat.onMenuShareTimeline({
          title: '孝行通', // 分享标题
          link: link, // 分享链接
          imgUrl: logo, // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
          }
        })
      }
    },
    mounted: function () {
      this.getPointInfo()
      this.weixinfn15()
    }
  }
</script>

<style scoped="scoped" lang="less">
  .flex-demo {
    text-align: center;
    background-clip: padding-box;
    height: 50px;
  }
  .flex-demo > p {
    line-height: 50px;
  }
  .flex-demo > p > span{
    font-weight: bold;
  }
  .flex-cash{
    text-align: left;
    background-clip: padding-box;
  }
  .flex-cash > p{
    font-size: 15px;
    margin-bottom: 10px;
    text-align: left;
    margin-left: 15px;
  }
</style>
